<template>
  <div class="app-container">
    <div class="nav">
      <h4>反馈管理</h4>
      <el-button class="btn-add" type="success" @click="handleAddProduct()" size="mini" style="height:40px;">查看模板</el-button>
    </div>
    <ul class="tab-tilte">
      <li @click="cur=0" :class="{active:cur==0}">反馈记录</li>
      <li @click="cur=1" :class="{active:cur==1}">获奖用户</li>
    </ul>
    <div class="tab-content">
      <div class="table-container" v-show="cur==0">
        <el-table ref="productTable" :data="list" style="width: 100%" @selection-change="handleSelectionChange" v-loading="listLoading" border="">
          <el-table-column type="index" label="序号" align="center"></el-table-column>
          <el-table-column label="姓名" align="center">
            <template slot-scope="scope">{{scope.row.name}}</template>
          </el-table-column>
          <el-table-column label="性别" align="center">
            <template slot-scope="scope">
              <!-- 性别：0女,1男 -->
              <span v-if="scope.row.gender==0">女</span>
              <span v-if="scope.row.gender==1">男</span>
            </template>
          </el-table-column>
          <el-table-column label="年龄" align="center">
            <template slot-scope="scope">{{scope.row.age}}</template>
          </el-table-column>
          <el-table-column label="健康问题标签" align="center">
            <template slot-scope="scope">{{scope.row.content}}</template>
          </el-table-column>
          <el-table-column label="发布时间" align="center">
            <template slot-scope="scope">{{scope.row.createTime}}</template>
          </el-table-column>
          <el-table-column label="反馈内容" align="center">
            <template slot-scope="scope">
              <p>
                <el-button size="mini" @click="handleShowProduct(scope.$index, scope.row)">查看</el-button>
              </p>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="table-container" v-show="cur==1">
        <el-table ref="productTable" :data="awardsMemberlist" style="width: 100%" @selection-change="handleSelectionChange" v-loading="listLoading" border="">
          <el-table-column label="获奖时间" align="center">
            <template slot-scope="scope">{{scope.row.createTime}}</template>
          </el-table-column>
          <el-table-column label="获奖用户" align="center">
            <template slot-scope="scope">
              <p style="color:#09f">{{scope.row.name}}</p>
            </template>
          </el-table-column>
          <el-table-column label="奖励积分" align="center">
            <template slot-scope="scope">{{scope.row.points}}</template>
          </el-table-column>
          <el-table-column label="反馈内容" align="center">
            <template slot-scope="scope">
              <p>
                <el-button size="mini" @click="handlemember(scope.$index, scope.row)">查看</el-button>
              </p>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog title="用户反馈" :model="agentVO" :visible.sync="editSkuInfo.dialogVisible" width="40%">
      <div class="infoitem">
        <!-- <span>{{feedbackdetails}}</span> -->
        <p>用户姓名：{{agentVO.name}}</p>
        <p>手机号码：{{agentVO.phone}}</p>
        <p>年龄：{{agentVO.age}}岁</p>
        <p>
          性别：
          <span v-if="agentVO.gender==0">女</span>
          <span v-if="agentVO.gender==1">男</span>
        </p>
      </div>
      <div class="item">
        <p>{{agentVO.content}}</p>
      </div>
    </el-dialog>
    <el-dialog title="获奖用户" :model="member" :visible.sync="editSkuInfo.dialogVisible2" width="40%">
      <p>获奖时间{{member.createTime}}</p>
      <p>获奖用户{{member.name}}</p>
      <p>奖励积分{{member.points}}</p>
    </el-dialog>
  </div>
</template>
<script>
import { fetchList, getByIds, awardsMemberList } from "@/api/feedback";

// import { fetchList as fetchProductAttrList } from "@/api/productAttr";
// import { fetchListWithChildren } from "@/api/productCate";

const defaultListQuery = {
  merchantId: 1,
  pageNum: 1,
  pageSize: 5
};
const defaultMemberListQuery = {
  merchantId: 1,
  pageNum: 1,
  pageSize: 5
};
const defaultAgentVO = {
  name: null,
  phone: null,
  age: null,
  gender: 0,
  content: null
};
const defaultmember = {
  createTime: null,
  name: null,
  points: null
};
export default {
  name: "productList",
  data() {
    return {
      editSkuInfo: {
        dialogVisible: false,
        dialogVisible2: false,
        productId: null,
        productSn: "",
        productAttributeCategoryId: null,
        stockList: [],
        productAttr: []
      },
      feedbackdetails: null,
      operateType: null,
      agentVO: Object.assign({}, defaultAgentVO),
      member: Object.assign({}, defaultmember),
      listQuery: Object.assign({}, defaultListQuery),
      MemberlistQuery: Object.assign({}, defaultMemberListQuery),
      list: null,
      awardsMemberlist: null,
      total: null,
      listLoading: true,
      selectProductCateValue: null,
      multipleSelection: [],
      productCateOptions: [],
      brandOptions: [],
      cur: 0
    };
  },
  filters: {
    frompublishStatus(value) {
      // 性别：0女,1男
      if (value == "1") {
        return "下架";
      } else {
        return "上架";
      }
    }
  },
  created() {
    this.getList();
    this.getMemberList();
    // this.getBrandList();
    // this.getProductCateList();
  },

  methods: {
    getProductSkuSp(row, index) {
      if (index === 0) {
        return row.sp1;
      } else if (index === 1) {
        return row.sp2;
      } else {
        return row.sp3;
      }
    },
    handleSelectionChange() {},
    getList() {
      this.listLoading = true;
      fetchList(this.listQuery).then(response => {
        if (response.code == 0) {
          if (response.data) {
            this.listLoading = false;
            this.list = response.data.list;
            this.total = response.data.total;
          }
        }
      });
    },

    getMemberList() {
      awardsMemberList(this.MemberlistQuery).then(response => {
        if (response.code == 0) {
          if (response.data) {
            this.listLoading = false;
            this.awardsMemberlist = response.data.list;
            this.total = response.data.total;
          }
        }
      });
    },
    handleShowProduct(index, row) {
      this.editSkuInfo.dialogVisible = true;
      this.id = row.id;
      getByIds(this.id).then(response => {
        this.feedbackdetails = response.data;
        this.agentVO = response.data;
      });
    },
    handlemember(index, row) {
      this.editSkuInfo.dialogVisible2 = true;
      this.id = row.id;
      getByIds(this.id).then(response => {
        this.feedbackdetails = response.data;
        this.member = response.data;
      });
    },
    // 查看模板
    handleAddProduct() {
      this.$router.push({ path: "template" });
    },
    getProductCateList() {
      fetchListWithChildren().then(response => {
        let list = response.data;
        this.productCateOptions = [];
        for (let i = 0; i < list.length; i++) {
          let children = [];
          if (list[i].children != null && list[i].children.length > 0) {
            for (let j = 0; j < list[i].children.length; j++) {
              children.push({
                label: list[i].children[j].name,
                value: list[i].children[j].id
              });
            }
          }
          this.productCateOptions.push({
            label: list[i].name,
            value: list[i].id,
            children: children
          });
        }
      });
    },
    handleShowSkuEditDialog(index, row) {
      this.editSkuInfo.dialogVisible = true;
      this.editSkuInfo.productId = row.id;
      this.editSkuInfo.productSn = row.productSn;
      this.editSkuInfo.productAttributeCategoryId =
        row.productAttributeCategoryId;
      this.editSkuInfo.keyword = null;
      fetchSkuStockList(row.id, { keyword: this.editSkuInfo.keyword }).then(
        response => {
          this.editSkuInfo.stockList = response.data;
        }
      );
      fetchProductAttrList(row.productAttributeCategoryId, { type: 0 }).then(
        response => {
          this.editSkuInfo.productAttr = response.data.list;
        }
      );
    },
    handleSearchEditSku() {
      fetchSkuStockList(this.editSkuInfo.productId, {
        keyword: this.editSkuInfo.keyword
      }).then(response => {
        this.editSkuInfo.stockList = response.data;
      });
    },
    handleEditSkuConfirm() {
      if (
        this.editSkuInfo.stockList == null ||
        this.editSkuInfo.stockList.length <= 0
      ) {
        this.$message({
          message: "暂无sku信息",
          type: "warning",
          duration: 1000
        });
        return;
      }
      this.$confirm("是否要进行修改", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        updateSkuStockList(
          this.editSkuInfo.productId,
          this.editSkuInfo.stockList
        ).then(response => {
          this.$message({
            message: "修改成功",
            type: "success",
            duration: 1000
          });
          this.editSkuInfo.dialogVisible = false;
        });
      });
    },
    handleSearchList() {
      this.listQuery.pageNum = 1;
      this.getList();
    },

    updateDeleteStatus(deleteStatus, ids) {
      let params = new URLSearchParams();
      params.append("ids", ids);
      params.append("deleteStatus", deleteStatus);
      updateDeleteStatus(params).then(response => {
        this.$message({
          message: "删除成功",
          type: "success",
          duration: 1000
        });
      });
      this.getList();
    }
  }
};
</script>
<style type="text/css">
.app-container {
  background: #fff;
  min-height: 500px;
}
.nav {
  display: flex;
  justify-content: space-between;
}
h4 {
  margin: 0;
  padding: 0;
}
.infoitem {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f1f1f1;
}
ul li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tab-tilte {
  width: 50%;
  margin: 0;
  padding: 0;
  margin-bottom: 10px;
  height: 40px;
}

.tab-tilte li {
  float: left;
  width: 25%;
  padding: 10px 0;
  text-align: center;
  background-color: #f4f4f4;
  cursor: pointer;
}

/* 点击对应的标题添加对应的背景颜色 */
.tab-tilte .active {
  background-color: #09f;
  color: #fff;
}
</style>


